<template>
  <div>
    <el-container>
      <el-header height="350px">
        <el-row>
          <!--          轮播图-->

            <el-carousel :interval="2000" type="card" height="250px">
              <el-carousel-item v-for="item in imgList" :key="item">
                <img :src="item" style="height: 100%;width: 100%">
              </el-carousel-item>
            </el-carousel>
        </el-row>
    <el-row>
            <el-button type="primary"  @click="show=true" :plain="!show">视频</el-button>
            <el-button type="primary" @click="show=false"  :plain="show">文章 </el-button>
<!--            <el-button type="primary" @click="show=false"  :plain="show">文章 </el-button>-->
    </el-row>

      </el-header>
      <el-main>
        <UserVideoList v-show="show"></UserVideoList>
        <UserTopicList v-show="!show"></UserTopicList>

      </el-main>
    </el-container>
  </div>
</template>

<script>
import UserVideoList from "@/components/UserVideoList";
import UserTopicList from "@/components/UserTopicList";


export default {
  name: "UserPage",
  components: {UserVideoList, UserTopicList},
  data() {
    return {
      show:true,
      activeIndex: '1',
      activeIndex2: '1',
      currentDate: new Date(),
      imgList: [
        "https://healcharity.org/wp-content/uploads/2020/11/Heal-Logo-Main.jpeg",
        "https://netflixinbelgie.be/wp-content/uploads/2019/02/Heal-Netflix-810x456.jpg",
        "https://tse4-mm.cn.bing.net/th/id/OIP-C.cLqVQpn8SB24MxNyhg0T-QHaE8?pid=ImgDet&w=1820&h=1214&rs=1",
        "https://ts1.cn.mm.bing.net/th/id/R-C.842c6fc7281e9e88864041221ede9902?rik=9jJYqKQnhmbb%2bw&riu=http%3a%2f%2fphotos.prnewswire.com%2fprnfull%2f20160122%2f325080LOGO%3fmax%3d950&ehk=YVIk5llwj%2fCAhLxCFpyOtEALc2Yk6mqLvyGFhu0HeEk%3d&risl=&pid=ImgRaw&r=0",
        "https://tse4-mm.cn.bing.net/th/id/OIP-C.ifN9enmJbJoPflCnjb9y0AHaDt?pid=ImgDet&rs=1",

        // 'https://ts1.cn.mm.bing.net/th/id/R-C.0c798f11a2b7bd9805d66dd4eed8681a?rik=bqaRlR8GkoJ%2buw&riu=http%3a%2f%2fimage.qianye88.com%2fpic%2f50388de9036db4eb1a4e529289d888ad&ehk=IpXLVK%2f3BaotzQgQGDEHTvvxFp0ahzrOPZXfA9M3poc%3d&risl=&pid=ImgRaw&r=0',
        // 'https://pic2.zhimg.com/v2-8c1fe7a270e8213e4332befd64035dce_r.jpg?source=1940ef5c',
        // 'https://ts1.cn.mm.bing.net/th/id/R-C.f9cd65199313bf901930e161248597fb?rik=7A9h1TepLAI2Yg&riu=http%3a%2f%2fi2.img.969g.com%2fdown%2fimgx2014%2f10%2f24%2f289_102437_ca7f3.jpg&ehk=cmSLtoJoX3zBWSqnPGasMICVEfhLiQzC7i2%2f%2bWSCrVI%3d&risl=&pid=ImgRaw&r=0',
        // 'https://ts1.cn.mm.bing.net/th/id/R-C.23b4cb73b726088b2cc35bc9354d79bb?rik=LGrrVwrToNoEag&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2f1304%2f15.jpg&ehk=RUGZ4Z%2fsVSgL8NiXK0zidwDtpm9MLdczDhVAoFqLewU%3d&risl=&pid=ImgRaw&r=0',
        // 'https://pic4.zhimg.com/v2-7bc17d648aa581d03c7f82708de23ec6_r.jpg?source=1940ef5c',
        // 'https://pic1.zhimg.com/v2-b3c2c6745b9421a13a3c4706b19223b3_r.jpg?source=1940ef5c',
      ],

    };


  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },


  }

}
</script>

<style scoped>
.el-header {
  background-color: rgba(154, 191, 153, 0);
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #E9EEF300;
  color: #333;
  text-align: center;
  /*width: 80%;*/
  padding-left: 10%;
  padding-right: 10%;
  /*line-height: 200px;*/
}

.time {
  font-size: 13px;
  color: #9990;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {

  display: block;
  max-width: 70%;
  max-height: 70%;

}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.bg-purple-dark {
  background: #99a9bf00;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}

.el-carousel__item h3 {
  color: rgba(72, 61, 139, 0);
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: rgba(102, 51, 153, 0);
}

.el-carousel__item:nth-child(2n+1) {
  background-color: rgba(0, 100, 25, 0);
}
</style>
